<template>
    <div>
		<!-- 转化页面 -->
        <!-- <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="应用跟踪"> -->

                <a-form layout="horizontal" :form="form" @submit="handleSubmit">
                    <a-row >
                    <a-col :md="4" :sm="24" >
                        <a-form-item
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                        <a-select 
                        v-decorator="[
                            'status',
                            ]"
                        placeholder="请选择转化状态" :allowClear="true">
                            <a-select-option value="AD_CONVERT_STATUS_ACTIVE">激活</a-select-option>
                            <a-select-option value="AD_CONVERT_STATUS_INACTIVE">未激活</a-select-option>
                        </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24" >
                        <a-form-item
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                        <a-select 
                        v-decorator="[
                            'deep_external_action',
                            ]"
                        placeholder="请选择深度转化目标" :allowClear="true">
                        <a-select-option value="AD_CONVERT_TYPE_ACTIVE_REGISTER">注册</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_NEXT_DAY_OPEN">次留</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_LT_ROI">广告变现ROI</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_PURCHASE_ROI">付费ROI</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_GAME_ADDICTION">关键行为</a-select-option>
                        </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24" >
                        <a-form-item
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                        <a-select 
                        v-decorator="[
                            'convert_type',
                            ]"
                        placeholder="请选择转化目标" :allowClear="true">
                        <a-select-option value="AD_CONVERT_TYPE_ACTIVE_REGISTER">注册</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_ACTIVE">激活</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_APP_PAY">app内付费</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_PAY">激活且付费</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_APP_ORDER">app内下单（电商）</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_APP_UV">app内访问</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_APP_CART">app内添加购物车（电商）</a-select-option>
                        <a-select-option value="AD_CONVERT_TYPE_APP_DETAIL_UV">app内详情页到站uv</a-select-option>
                        </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="4" :sm="24" >
                        <a-form-item
                        
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                        <a-select 
                        v-decorator="[
                            'account_id',
                            ]"
                        placeholder="请选择广告投放账号" :allowClear="true">
                        <a-select-option v-for="(item,index) in datalist" :key="index">{{item.account_id}}{{item.name}}</a-select-option>
                        </a-select>
                        </a-form-item>
                    </a-col>

                     <a-col :md="4" :sm="24" >
                        <a-form-item
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                        <a-select 
                        v-decorator="[
                            'opt_status',
                            ]"
                        placeholder="请选择提交状态" :allowClear="true">
                        <a-select-option value="AD_CONVERT_OPT_STATUS_ENABLE">启用</a-select-option>
                        <a-select-option value="AD_CONVERT_OPT_STATUS_DISABLE">删除</a-select-option>
                        </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24" >
                        <a-form-item
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                        <a-input v-decorator="[
                            'name',
                            ]"
                    placeholder="请输入名称关键词" />
                        </a-form-item>
                    </a-col>
                    </a-row>
                    
                    <span style=" margin-top: 3px;">
						<a-space>
							<a-button type="primary" @click="queryresult">查询</a-button>
							<a-button @click="btncancel">重置</a-button>
							<a-button @click="synction"><a-icon type="sync" />同步</a-button>
						</a-space>
                    </span>
                </a-form>

				<a-modal
					title="选择同步广告投放账号"
					:visible="visible"
					:confirm-loading="confirmLoading"
					@ok="handleOk"
					@cancel="handleCancel"
					:width="700"
				>
					<p>说明:同步时间与数量相关,确认后将自动同步,请耐心等待</p>
					<a-input-search placeholder="请输入名称或ID搜索" style="width: 200px;margin-bottom:16px;" @search="onSearch" />

					<a-table :row-selection="rowacountlist" :columns="acountlabel" :scroll="{ x: 210, y: 500 }" :pagination="false" :data-source="datalist">
						<a slot="name" slot-scope="text">{{ text.name }}</a>
					</a-table>
				
				</a-modal>

                <a-table
                  :columns="columns"
                  :dataSource="dataSource.list"
                  :selectedRows.sync="selectedRows"
                  @clear="onClear"
                  style="margint-top:20px;"
				  :pagination="paginationOpt"
				  :loading='tableloading'
				  :scroll="{ x: 1500 }"
                >

				<!-- 广告主 -->
				<div slot="mainDemo" slot-scope="text">
					<span>
						{{text.account_id}}
						<!-- <p>{{text.ocean_account.name}}</p> -->
					</span>
				</div>

                <!-- 提交状态 -->
                <div slot="optDemo" slot-scope="text">
                    <span v-if="text =='AD_CONVERT_OPT_STATUS_ENABLE'">启用</span>
                    <span v-else>删除</span>
                </div>

                <!-- 转化状态 -->
                <div slot="statusDemo" slot-scope="text">
                    <span v-if="text =='AD_CONVERT_STATUS_ACTIVE'">激活</span>
                    <span v-else>未激活</span>
                </div>
				
				<!-- 转化目标 -->
				<div slot="typeDemo" slot-scope="text">
                    <span v-if="text =='AD_CONVERT_TYPE_ACTIVE_REGISTER'">注册</span>
					<span v-else-if="text =='AD_CONVERT_TYPE_ACTIVE'">激活</span>
					<span v-else-if="text =='AD_CONVERT_TYPE_APP_PAY'">app内付费</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_PAY'">激活且付费</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_APP_ORDER'">app内下单（电商）</span>
					<span v-else-if="text =='AD_CONVERT_TYPE_APP_UV'">app内访问</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_APP_CART'">app内添加购物车（电商）</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_APP_DETAIL_UV'">app内详情页到站uv</span>
                    <span v-else>其他</span>
                </div>
				<!-- 深度转化 -->
				<div slot="actionDemo" slot-scope="text">
                    <span v-if="text =='AD_CONVERT_TYPE_ACTIVE_REGISTER'">注册</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_NEXT_DAY_OPEN'">次留</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_LT_ROI'">广告变现ROI</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_PURCHASE_ROI'">付费ROI</span>
                    <span v-else-if="text =='AD_CONVERT_TYPE_GAME_ADDICTION'">关键行为</span>
                    <span v-else>无</span>
                </div>

				<div slot="sourceDemo" slot-scope="text">
					<span v-if="text =='AD_CONVERT_SOURCE_TYPE_INTERNAL'">平台提供的转化工具</span>
					<span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_JS'">代码检测转化</span>
					<span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_XPATH'">路径转化</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_APP_DOWNLOAD'">应用下载API</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_API'">落地页API</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_H5_API'">落地页API（H5）</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_SDK'">应用下载SDK</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_OPEN_URL'">应用直达API</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD'">普通应用下载</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_CONFIG'">无转化跟踪</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_CPS_GAME'">内部游戏cps应用下载</span>
                    <span v-else-if="text =='AD_CONVERT_SOURCE_TYPE_APP_API_TEMAI'">落地页API(支持特卖)</span>
                    <span v-else>无</span>
				</div>
				<!-- 操作系统 -->
				<div slot="appDemo" slot-scope="text">
					<span v-if="text =='APP_IOS'">IOS</span>
					<span v-else>android</span>
				</div>

				<!-- 下载链接 -->
				<div slot="urlDemo" slot-scope="text">
					<a :href="text.download_url" target="_blank">
						<span :title="text.download_url" v-if="text.download_url != ''">{{text.download_url}}</span>
						<span :title="text.external_url" v-else>{{text.external_url}}}</span>
					</a>
				</div>

				<!-- 操作 -->
				<div slot="action">
					<!-- <a-space>
						<a @click="synction">推送</a>
						<a>删除</a>
					</a-space> -->
				</div>
                </a-table>

            <!-- </a-tab-pane> -->
            <!-- <a-tab-pane key="2" tab="线索收集">
                好啊吧
            </a-tab-pane> -->
        <!-- </a-tabs> -->
    </div>
</template>

<script>
import {ADCONVERTLIST,ACCOUNTURL,SYNCURL} from '@/services/api'
// import StandardTable from '@/components/table/StandardTable'
import {ajaxparems} from '@/services/ajaxrequest'
const columns = [
    {
    title: '转化ID',
	dataIndex:'id',
	key:'id',
	fixed:'left',
	ellipsis: true,
  },
  {
	title: '转化名称',
	width:160,
	fixed:'left',
    dataIndex: 'name',
  },
  {
	title: '广告投放账号',
	width:160,
	fixed:'left',
    scopedSlots: { customRender: 'mainDemo' }
  },
  {
	title: '提交状态',
	width:160,
    dataIndex: 'opt_status',
    scopedSlots: { customRender: 'optDemo' }
  },
  {
	title: '转化状态',
	width:130,
    dataIndex: 'status',
    scopedSlots: { customRender: 'statusDemo' }
  },
  {
	title: '转化目标',
	width:130,
	dataIndex: 'convert_type',
	scopedSlots: { customRender: 'typeDemo' }
  },
   {
		title: '深度转化目标',
		width:130,
	  dataIndex: 'deep_external_action',
	  scopedSlots: { customRender: 'actionDemo' }
  },
  {
		title: '跟踪方式',
		width:130,
		dataIndex: 'convert_source_type',
		scopedSlots: { customRender: 'sourceDemo' }

  },
    {
	title: '操作系统',
	width:130,
	  dataIndex: 'app_type',
	  scopedSlots: { customRender: 'appDemo' }
  },
    {
	title: '下载链接',
	 ellipsis: true,
	//  key:'',
	width:160,
	scopedSlots: { customRender: 'urlDemo' },
	
  },
  {
	title: '点击监测链接',
	width:160,
	  dataIndex: 'action_track_url',
	   ellipsis: true,
  },
  {
		title: '展示监测链接',
		width:160,
	  dataIndex: 'display_track_url',
	   ellipsis: true,
  },
  {
    title: '操作',
	dataIndex: 'id',
	fixed: 'right',
    width: 150,
    scopedSlots: { customRender: 'action' }
  },
]

var acountlabel = [
	{
		title:'广告账号',
		scopedSlots: { customRender: 'name' }
	}
]
var dataSource = [];
var datalist =[];
export default {
  	name: 'QueryList',
   	created(){
		this.listNew();
		this.onaccountlist();
	},
	beforeCreate() {
		this.form = this.$form.createForm(this);
	},
	data () {
		return {
			advanced: false,
			columns: columns,
			dataSource:dataSource,
			selectedRows: [],
			visible:false,
			datalist,
            checkaccount:[],
            dateFormat: 'YYYY/MM/DD',
            monthFormat: 'YYYY/MM',
			datas:[],
			acountlabel,
			accountlist:[],
			tableloading:true,

			paginationOpt: {
				defaultCurrent: 1, // 默认当前页数
				defaultPageSize: 10, // 默认当前页显示数据的大小
				total: 0, // 总数，必须先有
				showSizeChanger: true,
				showQuickJumper: true,
				pageSizeOptions: ["5", "10", "15", "20"],
				showTotal: (total) => `共 ${total} 条`, // 显示总数
				onShowSizeChange: (current, pageSize) => {
					this.paginationOpt.defaultCurrent = current;
					this.paginationOpt.defaultPageSize = pageSize;
					this.listNew(); //显示列表的接口名称
				},
				// 改变每页数量时更新显示
				onChange: (current, size) => {
					console.log(current);
					this.paginationOpt.defaultCurrent = current;
					this.paginationOpt.defaultPageSize = size;
					this.listNew();
				},
			},
		}
	},
	authorize: {
		deleteRecord: 'delete'
	},
  	methods: {
		synction(){
			//同步
			this.visible = true;
		},
		handleCancel(){
			// 取消同步
			this.visible = false;
		},
		onSearch(e){
			// 同步账号搜索
			var parems = {"filtering":[
				{"field":'name',"operator":'LIKE',"value":e},
				// {"field":'account_id',"operator":'IN',"value":e}
			]};

			ajaxparems(ACCOUNTURL,parems).then((res) => {
				var result=res.data;
				if(result.code =="SUCCESS"){
					this.datalist =result.data;
				}else{
 					this.$message.error(result.message, 3)
				}
			})
        },
        ondates(value, dateString){
           this.datas = dateString;
        },
		handleOk(){
            // 确定同步
            this.visible = false;
			if(this.checkaccount.length <=0){
				this.$message.error("请选择同步账号");
				return;
			}
			var accountlist = [];
			this.checkaccount.forEach((res)=>{
				accountlist.push(res.account_id);
			})
			var parems = {"account_ids":accountlist,"type":'AD_CONVERT'}
			ajaxparems(SYNCURL,parems).then((res) => {
				var result=res.data;
				if(result.code =="SUCCESS"){
						this.visible = false;
						this.$message.success(result.message,3);
						this.reload();
				}else{
					this.$message.error(result.message, 3)
				}
			})
		},
		deleteRecord(key) {
			this.dataSource = this.dataSource.filter(item => item.key !== key)
			this.selectedRows = this.selectedRows.filter(item => item.key !== key)
		},
		btncancel(){
			//   重置
			this.form.resetFields();
			this.listNew();
        },
        detailinfo(e){
            // 详情
            console.log(e);
        },
		queryresult(){
			this.listNew();
		},
		handleSubmit(res){
			console.log(res);
		},
		toggleAdvanced () {
		this.advanced = !this.advanced
		},
		remove () {
		this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
		this.selectedRows = []
		},
		onClear() {
		this.$message.info('您清空了勾选的所有行')
		},
		onStatusTitleClick() {
		this.$message.info('你点击了状态栏表头')
		},
		onChange() {
		this.$message.info('表格状态改变了')
		},
		onSelectChange() {
		this.$message.info('选中行改变了')

		},
		addNew () {
			this.$router.push('/promotion/advering/addadver')
		},
		editRecord(e){
			console.log(e);
        //     var parems = {"filtering":[{"field":'task_id',"operator":'EQUALS',"value":e}]};
        //    ajaxparems(ALLSONTASK,parems).then((res) => {
        //         var result=res.data;
		// 		if(result.code =="SUCCESS"){
        //             this.visible = true;
        //             if(result.data.list.length >0){
        //                 this.tasksonlist = result.data.list;
        //             }else{
        //                 this.tasksonlist = [];
        //             }
		// 		}else{
		// 			this.$message.error(result.message, 3)
		// 		}
		// 	})
		},
		listNew() {
			this.tableloading = true;
			const { defaultCurrent, defaultPageSize } = this.paginationOpt;
			this.form.validateFieldsAndScroll((err, values) => {
                var paremsinfo = [];
				var parems = {};
				if(values['status'] !=undefined){
					paremsinfo.push({"field":"status","operator":"EQUALS","value":values['status']})
				}
				if(values['deep_external_action'] !=undefined){
					paremsinfo.push({"field":"deep_external_action","operator":"EQUALS","value":values['deep_external_action']})
				}

				if(values['convert_type'] !=undefined){
					paremsinfo.push({"field":"convert_type","operator":"EQUALS","value":values['convert_type']})
				}

				if(values['account_id'] !=undefined){
					paremsinfo.push({"field":"account_id","operator":"EQUALS","value":values['account_id']})
				}

				if(values['opt_status'] !=undefined){
					paremsinfo.push({"field":"opt_status","operator":"EQUALS","value":values['opt_status']})
				}

				if(values['name'] !=undefined){
					paremsinfo.push({"field":"name","operator":"LIKE","value":values['name']})
				}

				if(paremsinfo.length >0){
					parems = {
						page:defaultCurrent,
						page_size:defaultPageSize,
						"filtering":paremsinfo
					};
				}else{
					parems = {
						page:defaultCurrent,
						page_size:defaultPageSize,
					}
				}

                
				ajaxparems(ADCONVERTLIST,parems).then((res) => {
					var result=res.data;
					if(result.code =="SUCCESS"){
						this.dataSource =result.data;
						this.paginationOpt.total = result.data.page_info.total;
						this.tableloading = false;
					}else{
						this.tableloading = false;
						this.$message.error(result.message, 3)
					}
				})
			});
		},

		onaccountlist(){
			// 获取广告主账号
			ajaxparems(ACCOUNTURL,"").then((res) => {
				var result=res.data;
				if(result.code =="SUCCESS"){
					this.datalist =result.data;
				}else{
 					this.$message.error(result.message, 3)
				}
			})
		},

		handleMenuClick (e) {
		if (e.key === 'delete') {
			this.remove()
		}
		}
  },computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
			this.selectedRows = selectedRows;
        //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
      };
    },
    rowacountlist() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
		//   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
			this.checkaccount = selectedRows;
        },
      };
    }
  }
}
</script>

<style lang="less" scoped>
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
